<template>
  <div class="container">
    <div class="page-header">
      <div class="back-button">
        <el-button @click="$router.push('/main/biao/beidiao')" icon="el-icon-back">返回</el-button>
      </div>
      <h1>背景调查表列表</h1>
    </div>

    <div class="main-content">
      <div class="search-bar">
        <div class="search-inputs">
          <el-input v-model="searchForm.name" placeholder="请输入姓名" prefix-icon="el-icon-user" clearable />
          <el-input v-model="searchForm.appliedPosition" placeholder="请输入应聘职位" prefix-icon="el-icon-office-building"
            clearable />
          <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
          <el-button type="success" @click="$router.push('/main/biao/beidiao')" icon="el-icon-plus">
            新增背景调查表
          </el-button>
        </div>
        <!-- <div class="search-buttons">
        </div> -->
      </div>

      <el-card class="table-card">
        <el-table :data="tableData" style="width: 100%" border stripe highlight-current-row>
          <el-table-column prop="name" label="姓名" min-width="120" />
          <el-table-column prop="appliedPosition" label="应聘职位" min-width="150" />
          <el-table-column prop="previousCompany" label="原公司名称" min-width="200" />
          <el-table-column prop="investigationDate" label="调查日期" min-width="120" />
          <el-table-column label="操作" width="280" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" plain @click="viewDetail(scope.row.id)"
                icon="el-icon-view">查看</el-button>
              <el-button size="mini" type="warning" plain @click="handleEdit(scope.row.id)"
                icon="el-icon-edit">编辑</el-button>
              <el-button size="mini" type="danger" plain @click="deleteRecord(scope.row.id)"
                icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination @current-change="changePage" :current-page="current" :page-size="size" :total="total * size"
            layout="prev, pager, next, jumper" background />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import backgroundInvestigationApi from '@/api/backgroundInvestigation';

export default {
  data() {
    return {
      searchForm: {
        name: '',
        appliedPosition: ''
      },
      tableData: [],
      current: 1,
      size: 10,
      total: 0
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await backgroundInvestigationApi.getList({
          current: this.current,
          size: this.size,
          name: this.searchForm.name,
          appliedPosition: this.searchForm.appliedPosition
        });

        if (response.data) {
          this.tableData = response.data.records;
          this.total = Math.ceil(response.data.total / this.size);
        }
      } catch (error) {
        console.error('获取列表失败', error);
        this.$message.error('获取列表失败: ' + (error.response?.data?.message || error.message));
      }
    },
    search() {
      this.current = 1;
      this.fetchData();
    },
    changePage(page) {
      this.current = page;
      this.fetchData();
    },
    async viewDetail(id) {
      this.$router.push(`/main/biao/beidiao?id=${id}&type=view`);
    },
    handleEdit(id) {
      this.$router.push(`/main/biao/beidiao?id=${id}&type=edit`);
    },
    async deleteRecord(id) {
      try {
        await this.$confirm('确定要删除这条记录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        const response = await backgroundInvestigationApi.delete(id);
        if (response.data) {
          this.$message.success('删除成功');
          this.fetchData();
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除失败', error);
          this.$message.error('删除失败: ' + (error.response?.data?.message || error.message));
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  min-height: calc(100vh - 48px);
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  padding: 20px;
  position: relative;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  h1 {
    font-size: 24px;
    color: #2c3e50;
    margin: 0;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #409EFF, #67C23A);
      border-radius: 3px;
    }
  }
}

.back-button {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);

  .el-button {
    padding: 8px 15px;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.3s ease;

    &:hover {
      transform: translateX(-2px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
  }
}

.main-content {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.search-bar {
  margin-bottom: 24px;
  display: flex;
  // justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;

  .search-inputs {
    display: flex;
    gap: 16px;
    flex: 1;
    align-items: center;
    justify-content: center;

    .el-input {
      max-width: 200px;
    }
  }

  .search-buttons {
    display: flex;
    gap: 12px;
  }
}

.table-card {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  :deep(.el-table) {
    border-radius: 8px;
    overflow: hidden;

    th {
      background-color: #f5f7fa;
      color: #606266;
      font-weight: 600;
      padding: 12px 0;
    }

    td {
      padding: 12px 0;
    }

    .el-button {
      padding: 7px 12px;
    }
  }
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

@media screen and (max-width: 768px) {
  .container {
    padding: 16px;
  }

  .page-header {
    padding: 16px;
    margin-bottom: 20px;

    h1 {
      font-size: 20px;
    }
  }

  .main-content {
    padding: 16px;
  }

  .search-bar {
    flex-direction: column;
    align-items: stretch;

    .search-inputs {
      flex-direction: column;

      .el-input {
        max-width: none;
      }
    }

    .search-buttons {
      flex-direction: column;

      .el-button {
        width: 100%;
      }
    }
  }

  .table-card {
    :deep(.el-table) {
      .el-button {
        margin: 4px 0;
        display: block;
        width: 100%;
      }
    }
  }
}
</style>